<template>
	<view class="content">
		<view class="top">
			<image class="prev-icon" src="../../static/images/room/prev.png" mode="aspectFit" @click="prev"></image>
			<view class="mydevice">添加设备</view>
			<image class="plus-icon" src="../../static/images/room/more.png" mode="aspectFit" @click="handlePlus">
			</image>
		</view>
		<view class="page-container">
			<view class="title">
				连接到设备
			</view>
			<view class="wifi_title" @click="connectwifi">
				<image src="../../static/images/device/lanya1.png" class="ly"></image>
				<image src="../../static/images/device/wifi1.png" class="wifi"></image>
				<view class="connect">打开wifi和蓝牙进行连接</view>
			</view>

			<!-- 两个picker -->
			<view class="typesandroom">
				<view class="wifi_title2">
					<image src="../../static/images/device/zhengque.png" class="wifi"></image>
					<!-- <view class="types">{{types}} </view> -->
					<picker mode="selector" :range="devicetypes" @change="handleDeviceChange">
						<view class="types">{{ types }}</view>
					</picker>
				</view>
				<view class="wifi_title3" @click="togglePicker">
					<image
						:src="roomSelected ? '../../static/images/device/zhengque.png' : '../../static/images/device/cuowu.png'"
						class="wifi"></image>
					<!-- <view class="types">{{ roomSelected ? selectedRoomName : '房间' }}</view> -->
					<picker mode="selector" :range="roomNames" @change="handleRoomChange">
						<view class="types">{{ tempRoomName }}</view>
					</picker>
				</view>
			</view>
			<!-- <image v-bind:src="'../../static/images/device/${types}.png'" class="device_pic" ></image> -->

		</view>
		<view class="pic">
			<image :src="getDeviceIcon(types)" class="device_pic"></image>
			<!-- <image v-bind:src="`../../static/images/device/${types}.png`" class="device_pic"></image> -->
		</view>
		<view class="flex_between1">
			<input class="uni-input" @input="onKeyInput" maxlength="6" placeholder="请输入设备名" />
		</view>
		<view class="flex_between1">
			<view class="button-con" @click="handleConfirm">连接</view>
		</view>
		<view class="flex_between1">
			<view class="found">无法连接您的设备？</view>
		</view>
		<view class="flex_between1">
			<view class="knowmore">了解更多</view>
		</view>
		<!-- <view v-if="showSuccessPopup" class="success-popup">
		      添加成功
		    </view> -->

	</view>




</template>

<script>
	import {
		addDevice
	} from '@/api/device/device.js';
	import {
		getRoom,
		delRoom,
		addRoom,
		updateRoom
	} from '@/api/room/room.js';
	export default {
		data() {
			return {
				types: '',
				showPicker: false,
				roomNames: [],
				inputValue: '',
				selectedRoomName: '',
				roomSelected: false,
				newDevice: {},
				showSuccessPopup: false,
				tempRoomName: '请选择房间',
				devicetypes: ['灯泡', '时钟', '冰箱', '床', '风扇', '马桶', '游戏手柄', '台灯', '手机', '电视', '锅', '插座', '插头', '空调', '其他'],
			};
		},
		onLoad(options) {
			this.getRoomList();
			if (options.types) {
				this.types = decodeURIComponent(options.types);
				console.log('Received types:', this.types);
			}
		},
		methods: {
			onKeyInput: function(event) {
				this.deviceName = event.target.value
			},
			showSuccess() {
				this.showSuccessPopup = true;
				setTimeout(() => {
					this.showSuccessPopup = false;
					uni.switchTab({
						url: "/pages/work/index",

						success: () => {

						}
					});
				}, 1000);

			},
			getRoomList() {
				getRoom().then(res => {
					console.log(res.rows);
					this.roomNames = res.rows.map(room => room.roomName);
					this.roomList = res.rows;
					console.log(this.roomNames);
				});
			},
			getDeviceIcon(types) {
				// 返回房间图标的路径
				switch (types) {
					case '灯泡':
						return '../../static/images/device/dengpao.png';
					case '时钟':
						return '../../static/images/device/shizhong.png';
					case '床':
						return '../../static/images/device/chuang.png';
					case '风扇':
						return '../../static/images/device/fengshan.png';
					case '冰箱':
						return '../../static/images/device/bingxiang.png';
					case '马桶':
						return '../../static/images/device/matong.png';
					case '游戏手柄':
						return '../../static/images/device/shoubing.png';
					case '台灯':
						return '../../static/images/device/taideng.png';
					case '手机':
						return '../../static/images/device/shouji.png';
					case '电视':
						return '../../static/images/device/dianshi.png';
					case '锅':
						return '../../static/images/device/guo.png';
					case '插座':
						return '../../static/images/device/chazuo.png';
					case '插头':
						return '../../static/images/device/chatou.png';
					case '空调':
						return '../../static/images/device/kongtiao.png';
					default:
						return '../../static/images/device/qita.png';
				}
			},
			handleRoomChange(e) {
				//	console.log(e)
				const selectedRoom = this.roomList[e.detail.value];
				//	console.log(selectedRoom)
				this.tempRoomName = selectedRoom.roomName;
				this.tempRoomId = selectedRoom.roomId;
				// console.log("cecece", selectedRoom);
				this.roomSelected = true;
			},
			handleConfirm() {
				//非空校验
				//	console.log("11111",this.tempRoomName,this.types,this.deviceName);

				if (this.tempRoomName === '请选择房间' || !this.types || !this.deviceName) {

					uni.showToast({

						title: '请填写所有必填项',
						icon: 'none'
					});
					return;
				}
				// console.log(this.$store.state.user.user.userId)
				this.newDevice.deviceName = this.deviceName;
				this.newDevice.deviceTypes = this.types;
				this.newDevice.status = false;
				this.newDevice.devicePic = this.types;
				this.newDevice.roomId = this.tempRoomId;
				console.log(this.newDevice);
				this.addDevice(this.newDevice);

				//this.$emit('confirm', { roomName: this.roomName, roomPic: this.roomPic });
				this.$emit('message', 'done')
			},
			//吧数据传到后端
			addDevice(newDevice) {

				addDevice(this.newDevice).then(() => {
					console.log('Add new device');
					// 调用添加成功弹窗显示

					this.$modal.showToast('添加成功');
					this.showSuccess();

				}).catch(error => {
					console.error('新增设备失败:', error.response ? error.response.data : error);
					uni.showToast({
						title: '新增设备失败，请重试',
						icon: 'none'
					});

				});
			},
			handleDeviceChange(e) {
				//	console.log(e)
				const selectedtypes = this.devicetypes[e.detail.value];
				console.log("11111", selectedtypes)
				this.types = selectedtypes;
				console.log("cecece", this.types);
			},
			prev() {
				uni.navigateBack({
					url: ".../index.vue"
				});
			},
			handlePlus() {
				console.log('Add new device');
			},
			connectwifi(){
				uni.navigateTo({
					url:'/pages/main'
				})
			},
			togglePicker() {
				this.showPicker = true;
				console.log(this.showPicker);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.top {
		display: flex;
		align-items: center;
		height: 52px;
		background-color: white;
		padding: 4px;
		position: fixed;
		/* 将状态栏固定在最上方 */
		top: 0;
		/* 从顶部开始定位 */
		left: 0;
		/* 从左侧开始定位 */
		width: 100%;
		/* 宽度100%，充满整个屏幕 */
		z-index: 9999;
		/* 确保状态栏位于其他内容上方 */
		border-bottom: 1.5px solid #f0f0f0;
		/* 下方灰色边框线 */
	}

	.prev-icon {
		flex: 1;
		width: 100%;
		height: 100%;
		object-fit: contain;
		margin-right: 86px;
		padding: 3px;
	}

	.mydevice {
		flex: 1.5;
		font-size: 18px;
		// color: #4e6490;
		font-weight: bold;
	}

	.plus-icon {
		flex: 1;
		width: 80%;
		height: 80%;
		object-fit: contain;
		margin-left: 86px;
		padding: 3px;
	}

	.page-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding-top: 112rpx;
		// background-color: #000000;
		align-items: center;
		justify-content: center;
		font-weight: bold;

	}

	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		min-width: 100%;
		padding: 15px;
		font-size: 38rpx;
		color: #333;
	}

	.wifi_title {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
		padding: 18rpx;
		width: 60%;
		max-width: 900rpx;
		margin: 0 auto;
		border-radius: 150rpx;
	}

	.wifi_title>image,
	.wifi_title>view {
		margin: 0 12rpx;
	}

	.ly {
		height: 40rpx;
		width: 40rpx;
		border-radius: 150rpx;
	}

	.wifi {
		height: 40rpx;
		width: 40rpx;
		border-radius: 150rpx;
	}

	.connect {
		font-size: 24rpx;
		color: #919191;
	}

	.wifi_title2 {
		display: flex;
		justify-content: center;
		align-items: center;
		// background-color: #f7f7f7;
		padding-top: 58rpx;
		width: 138rpx;
		max-width: 800rpx;
		margin: 0 auto;
		border-radius: 150rpx;
		cursor: pointer;
	}

	.wifi_title3 {
		display: inline-flex;
		justify-content: center;
		align-items: center;

		padding-top: 58rpx;
		padding-left: 22rpx;

		margin: 0 auto;
		border-radius: 150rpx;
		cursor: pointer;
	}

	.types {

		font-size: 30rpx;
		color: #000000;
	}

	.typesandroom {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.pic {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		/* 让父容器宽度充满 */
		/* 如果需要也可以设置高度充满 */
	}

	.device_pic {
		margin-top: 92rpx;
		width: 65%;
		height: 422rpx;
	}

	.flex_between1 {
		display: flex;
		justify-content: space-around;
		padding-top: 82rpx;

	}

	.button-con {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background-color: #405ff2;
		color: white;
		border-radius: 150rpx;
		text-align: center;
		width: 400rpx;
		height: 100rpx;
	}

	.found {
		margin-top: -12rpx;
	}

	.knowmore {
		color: #598ff2;
		margin-top: -70rpx;
	}

	.success-popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 20px 40px;
		background-color: rgba(255, 255, 255, 1);
		color: black;
		font-size: 18px;
		border-radius: 10px;
		text-align: center;
		z-index: 1000;
		border: 2rpx solid #405ff2;
		/* 添加蓝色边框 */
	}

	.uni-input {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f7f7f7;
		width: 400rpx;
		height: 100rpx;
		margin-top: 22rpx;
		margin-bottom: -37rpx;
		// margin: 0 auto;
		height: 92rpx;
		border-radius: 150rpx;
		text-align: center;
		border: 2rpx solid #405ff2;
		/* 添加蓝色边框 */
	}
</style>